import React, {useEffect, useCallback, useState} from "react";
import styles from './index.module.scss';
import {Slider, Space, InputNumber} from 'antd';
import dvTool from "@/pages/dv/dvTool";
import EnumOnFire from "@/pages/dv/constants/EnumOnFire";
import {EE} from "@/utils";
import {throttle} from 'lodash'


/**
 * 缩放工具
 * @param scale
 * @constructor
 */
export default function ScaleTool({}) {

  const [scale, setScale]  = useState(20);

  useEffect(() => {
    EE.on(EnumOnFire.changeScale, (value: number) => {
      setScale(Math.floor(value * 100))
    });
  }, []);

  const throttleSave = useCallback(throttle((value) => {
    dvTool.changeScale( value / 100)
  }, 100), []);


  // console.log(scale);
  const changeScale = (value: number) => {
    setScale(value);
    throttleSave(value);

  }

  return <div className={styles.scaleTool}>
    <Space>
      <span className={styles.title} onClick={() => changeScale(100)}>面板缩放</span>
      <Slider
        marks={{
          100: '',
        }}
        value={scale}
        style={{width: 200}}
        onChange={changeScale}
        min={10}
        max={200}
      />
      <InputNumber value={scale} size={'small'} style={{width: 55}} onChange={changeScale} max={200} min={10} step={1}/>
    </Space>
  </div>
}
